import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';

import Swiper from './Swiper'
import { IErrorType } from "../../../type/firstType";

interface IProps {
    error: IErrorType[]
}
const neverResolve = new Promise(() => {
});
function Suspender({ suspend }) {
    if (suspend) {
        throw neverResolve;
    } else {
        return null;
    }
}
function Preload({ show, children }) {
    return (
        <React.Suspense fallback={null}>
            {children}
            <Suspender suspend={!show} />
        </React.Suspense>
    );
}
@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const { error } = this.props
        const len = error.length;
        return (
            <div className={styles.topTwo}>
                <p className={styles.title}>运行错误率</p>
                <div>
                    <Preload show={!len}>
                        <div className={styles.noData}>设备运行正常</div>
                    </Preload>
                    <Preload show={len}>
                        <Swiper error={error} borderBottom='0.5px solid rgba(48,255,150,0.1)' borderTop='0.5px solid rgba(48,255,150,0.1)' />
                    </Preload>
                </div>


            </div>
        );
    }
}

export default Home;
